/*
* @Author: ls-mac
* @Date:   2018-09-04 09:44:18
 * @Last modified by:   ls-mac
 * @Last modified time: 2018-10-06T17:52:50+08:00
*/
import React, { PureComponent, Fragment } from 'react';
import { Card, Col, Row, Form, Progress } from 'antd';

class CardList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      columns: props.columns || [],
      dataSource: props.dataSource || '',
    };
  }

  componentWillReceiveProps(nextProps) {
    // clean
  }

  createContent = data => {
    const returndom = [];
    if (this.state.dataSource != '' && Object.keys(this.state.dataSource)!=0) {
      this.state.dataSource[data.key].map((v, i) => {
        if (v != '' && Object.keys(v).length != 0) {
          returndom.push(
            <Card hoverable>
              <Progress percent={v.b} showInfo={false} />
              <p style={{ margin: 0 }}>{v.a}</p>
              <p style={{ margin: 0 }}>
                {v.c} &nbsp;&nbsp; {v.d}
              </p>
            </Card>
          );
        }
      });
    }
    return returndom;
  };

  render() {
    const state = this.state;
    const s = Math.floor(24 / state.columns.length);

    return (
      <Row type="flex">
        {state.columns.map((v, i) => (
          <Col span={s}>
            <Card
              title={v.title}
              bordered={false}
              headStyle={{ textAlign: 'center', minHeight: '22px' }}
              bodyStyle={{ padding: '4px' }}
            >
              {this.createContent(v)}
            </Card>
          </Col>
        ))}
      </Row>
    );
  }
}

export default CardList;
